<template>
	<view class="lost-container">
		<view class="title">
			物品信息
		</view>
		<view class="sub-title">
			information
		</view>
		<image :src="lostInfo.propertyPicture" mode="" class="lost-good"></image>
		<view class="info">
			<text class="info-title">{{lostInfo.lostOrderType === '0'?'拾物':'丢失'}}时间：</text>
			<text class="info-value">{{formateTime(lostInfo.lostOrFindTime)}}</text>
		</view>
		<view class="info">
			<text class="info-title">{{lostInfo.lostOrderType === '0'?'拾物':'丢失'}}地点：</text>
			<text class="info-value">{{lostInfo.lostOrFindAddress}}</text>
		</view>
		<view class="info">
			<text class="info-title">{{lostInfo.lostOrderType === '0'?'拾到':'丢失'}}物品：</text>
			<text class="info-value">{{lostInfo.describe}}</text>
		</view>
		<view class="info">
			<text class="info-title">联系方式：</text>
			<text class="info-value">{{lostInfo.phone}}</text>
		</view>
		<view class="info">
			<text class="info-title">{{lostInfo.lostOrderType === '0'?'领取':'归还'}}地点：</text>
			<text class="info-value">{{lostInfo.targetAddress}}</text>
		</view>
		<view class="info">
			<text class="info-title">备注：</text>
			<text class="info-value">{{lostInfo.remark}}</text>
		</view>
		<u-line class="line"></u-line>
		<view class="buttons">
			<u-button type="primary" :plain="true" shape="circle" :text="'取消发布'" class="button" @click="cancel"
				color="#999" :class="'custom-style'" v-if="userId && userId === lostInfo.uid"></u-button>
			<u-button type="primary" :text="'联系对方'" shape="circle"
				color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
				class="button" @click="concat" :class="'custom-style'"
				v-if="userId && userId !== lostInfo.uid"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		name: "lostGoods",
		data() {
			return {
				userId: this.$store.getters?.userInfo?.uid || '',
			};
		},
		props: {
			lostInfo: {},


		},
		methods: {
			formateTime(value) {
				return this.$moment(value).format('YYYY-MM-DD HH:mm')
			},
			concat() {
				uni.makePhoneCall({
					phoneNumber: this.lostInfo.phone
				});
			},
			cancel() {
				this.$http('get',
					`api/private/lostAndFind/cancelLostOrder?lostOrFindOrderId=${this.lostInfo.lostOrFindOrderId}`, {
						success: (res) => {
							this.$parent.getLostOrder();
							this.$emit("cancelPublish");
						},
						successMsg: "取消发布成功！",
					})
			}
		}
	}

</script>

<style lang="scss">
	.lost-container {
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 0 7px #f1f1f1;
		background: #fff;
		position: relative;

		.title {
			color: #6584f7;
			text-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
			font-size: 15px;
			margin-bottom: 10px;
		}

		.sub-title {
			left: 30px;
			top: 20px;
			color: #6584f7;
			position: absolute;
			display: inline-block;
			opacity: 0.2;
			z-index: 0;
			text-align: right;
			font-weight: 900;
			font-size: 18px;

		}

		.lost-good {
			height: 80px;
			width: 80px;
		}

		.info {
			font-size: 14px;
			padding-left: 15px;
			padding: 4px;

			.info-title {
				color: #8799a3;
				line-height: 20px;
			}

			.info-value {
				color: #333333;
				font-weight: bold;
				line-height: 20px;
			}
		}
	}

	.buttons {
		margin-top: 10px;
		display: flex;
		flex-direction: row;

		.custom-style {
			margin: 0 15px;
		}
	}

</style>

